<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      // 设置字号为 30px  字体为 Arial
      ctx.font = '30px Arial'

      // 在 (50,50) 的位置绘制一段文本 "Canvas你好,前端你好,JavaScript你好"
      ctx.strokeText('Canvas你好,前端你好,JavaScript你好', 50, 50)

      // 在 (50,100) 的位置绘制一段文本，并限制最大宽度为 350
      ctx.strokeText('Canvas你好,前端你好,JavaScript你好', 50, 100, 350)

      // 在 (50,150) 的位置以填充的方式绘制一段文本，并限制最大的宽度为 350
      ctx.fillText('Canvas你好,前端你好,JavaScript你好', 50, 150, 350)
    </script>
  </body>
</html> -->

<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      // 默认情况
      ctx.strokeText('Canvas你好,前端你好,JavaScript你好', 50, 50)
      ctx.fillText('Canvas你好,前端你好,JavaScript你好', 50, 100)

      // 设置字号为 20px   字体为 Arial
      ctx.beginPath()
      ctx.font = '20px Arial'
      ctx.strokeText('Canvas你好,前端你好,JavaScript你好', 50, 200)
      ctx.fillText('Canvas你好,前端你好,JavaScript你好', 50, 250)

      // 设置字号为 30px   字体为 Georgia
      ctx.beginPath()
      ctx.font = '30px Georgia'
      ctx.strokeText('Canvas你好,前端你好,JavaScript你好', 50, 350)
      ctx.fillText('Canvas你好,前端你好,JavaScript你好', 50, 400)
    </script>
  </body>
</html>
 -->

<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      // 设置字号为 20px   字体为 Arial
      ctx.font = '20px Arial'

      // 默认情况 start
      ctx.fillText('你好Canvas,你好前端,你好JavaScript', 200, 50)

      // end
      ctx.beginPath()
      ctx.textAlign = 'end'
      ctx.fillText('你好Canvas,你好前端,你好JavaScript', 200, 100)

      // left
      ctx.beginPath()
      ctx.textAlign = 'left'
      ctx.fillText('你好Canvas,你好前端,你好JavaScript', 200, 150)

      // right
      ctx.beginPath()
      ctx.textAlign = 'right'
      ctx.fillText('你好Canvas,你好前端,你好JavaScript', 200, 200)

      // center
      ctx.beginPath()
      ctx.textAlign = 'center'
      ctx.fillText('你好Canvas,你好前端,你好JavaScript', 200, 250)
    </script>
  </body>
</html>

  -->

<!-- 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      // 设置字号为 20px   字体为 Arial
      ctx.font = '20px Arial'

      // 默认情况 inherit
      ctx.fillText('你好Canvas,你好前端,你好JavaScript', 200, 50)

      // ltr：文本方向从左向右
      ctx.beginPath()
      ctx.direction = 'ltr'
      ctx.fillText('你好Canvas,你好前端,你好JavaScript', 200, 100)

      // ltr：文本方向从右向左
      ctx.beginPath()
      ctx.direction = 'rtl'
      ctx.fillText('你好Canvas,你好前端,你好JavaScript', 200, 150)
    </script>
  </body>
</html>
   -->

<!-- 
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="880" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      // 设置字号为 20px   字体为 Arial
      ctx.font = '20px Arial'

      ctx.textAlign = 'start' // 起点对齐
      ctx.fillText('你好Canvas----》 start', 300, 50)
      ctx.textAlign = 'end' // 结尾对齐
      ctx.fillText('你好Canvas----》 end', 300, 100)
      ctx.textAlign = 'left' // 左对齐
      ctx.fillText('你好Canvas----》 left', 300, 150)
      ctx.textAlign = 'right' // 右对齐
      ctx.fillText('你好Canvas----》 right', 300, 200)
      ctx.textAlign = 'center' // 居中对齐
      ctx.fillText('你好Canvas----》 center', 300, 250)

      // ltr：文本方向从左向右
      ctx.beginPath()
      ctx.direction = 'ltr'

      ctx.textAlign = 'start' // 起点对齐
      ctx.fillText('你好Canvas----》 start', 300, 350)
      ctx.textAlign = 'end' // 结尾对齐
      ctx.fillText('你好Canvas----》 end', 300, 400)
      ctx.textAlign = 'left' // 左对齐
      ctx.fillText('你好Canvas----》 left', 300, 450)
      ctx.textAlign = 'right' // 右对齐
      ctx.fillText('你好Canvas----》 right', 300, 500)
      ctx.textAlign = 'center' // 居中对齐
      ctx.fillText('你好Canvas----》 center', 300, 550)

      // rtl：文本方向从左向右
      ctx.beginPath()
      ctx.direction = 'rtl'

      ctx.textAlign = 'start' // 起点对齐
      ctx.fillText('你好Canvas----》 start', 300, 650)
      ctx.textAlign = 'end' // 结尾对齐
      ctx.fillText('你好Canvas----》 end', 300, 700)
      ctx.textAlign = 'left' // 左对齐
      ctx.fillText('你好Canvas----》 left', 300, 750)
      ctx.textAlign = 'right' // 右对齐
      ctx.fillText('你好Canvas----》 right', 300, 800)
      ctx.textAlign = 'center' // 居中对齐
      ctx.fillText('你好Canvas----》 center', 300, 850)
    </script>
  </body>
</html>
    -->
<!-- 
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      ctx.strokeStyle = 'red' // 设置字体颜色
      ctx.font = '30px Arial' // 设置字号为 30px   字体为 Arial

      const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']
      baselines.forEach((baseline, index) => {
        ctx.textBaseline = baseline
        let y = 60 + index * 60
        ctx.beginPath()
        ctx.moveTo(10, y + 0.5)
        ctx.lineTo(500, y + 0.5)
        ctx.stroke()
        ctx.fillText('你好Canvas(' + baseline + ')', 10, y)
      })
    </script>
  </body>
</html>
     -->

<!-- 
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      ctx.font = '30px Arial' // 设置字号为 30px   字体为 Arial

      ctx.shadowColor = '#cccccc' // 设置阴影颜色
      ctx.shadowOffsetX = 10 // 设置 X轴 上的阴影
      ctx.shadowOffsetY = 10 // 设置 Y轴 上的阴影
      ctx.shadowBlur = 10 // 设置阴影的模糊程度
      ctx.fillText('你好Canvas', 50, 50)

      ctx.beginPath()
      ctx.shadowBlur = 5 // 设置阴影的模糊程度
      ctx.fillText('你好Canvas', 50, 100)

      ctx.beginPath()
      ctx.shadowOffsetX = 30 // 设置 X轴 上的阴影
      ctx.shadowOffsetY = 30 // 设置 Y轴 上的阴影
      ctx.fillText('你好Canvas', 50, 150)

      ctx.beginPath()
      ctx.shadowOffsetX = -10 // 设置 X轴 上的阴影
      ctx.shadowOffsetY = -10 // 设置 Y轴 上的阴影
      ctx.fillText('你好Canvas', 50, 200)
    </script>
  </body>
</html>
      -->
<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      var txt = '你好Canvas'

      ctx.font = '30px Arial' // 设置字号为 30px   字体为 Arial
      ctx.fillText(txt, 50, 50)
      ctx.fillText('字体宽度：' + ctx.measureText(txt).width, 50, 100)

      ctx.beginPath()
      ctx.font = '30px Georgia'
      ctx.fillText(txt, 50, 200)
      ctx.fillText('字体宽度：' + ctx.measureText(txt).width, 50, 250)

      ctx.beginPath()
      ctx.font = '30px Verdana'
      ctx.fillText(txt, 50, 350)
      ctx.fillText('字体宽度：' + ctx.measureText(txt).width, 50, 400)
    </script>
  </body>
</html>

 -->

<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      var img = new Image()
      img.src = './01.png'
      img.onload = () => {
        ctx.drawImage(img, 0, 0)
      }
    </script>
  </body>
</html>
  -->

<!-- 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      var img = new Image()
      img.src = './01.png'
      img.onload = () => {
        ctx.drawImage(img, 0, 0, 500, 500)
      }
    </script>
  </body>
</html>
   -->

<!-- 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      var img = new Image()
      img.src = './01.png'
      img.onload = () => {
        ctx.drawImage(img, 0, 150, 1650, 700, 0, 0, 550, 500)
      }
    </script>
  </body>
</html>
    -->
